<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter ref="filterForm" :type="type" />
      </div>
      <div>
        <el-row>
          <el-col v-for="(item,index) in insideTableData" :key="index" :span="24">
            <el-card class="box-card" shadow="never" style="height:130px">
              <div class="info-title">
                <span class="pointer" @click="click(item)" v-html="item.title" />
                <div>发布时间：{{ item.createTime }}</div>
              </div>
              <div class="info_keyword">
                <!-- 关键字：{{ item.keywordsName }} -->
                关键字：
                <el-tag v-for="(it,ind) in item.keywordsName" :key="ind" size="mini" :type="searchKey!==''? it.toUpperCase().indexOf(searchKey.toUpperCase())>-1 ? 'danger':'success':'success'">{{ it }}</el-tag>
              </div>
              <div class="info_body" v-html="item.content" />
              <div class="info_footer">
                <span>浏览量: {{ item.readingVolume }}</span> &nbsp; &nbsp; &nbsp;<span> 回复数：{{ item.comment.length }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <pagination :total="totalElements" :page.sync="currentPage" :limit.sync="pageSize" @pagination="onPageChange" />
      </div>

    </div>
    <ViewDialog class="fixed-dialog-height" :append-to-body="true" :title="title" :show.sync="dialogFormVisible" width="90%" @on-cancel="cancel">
      <EditForm v-if="dialogFormVisible" :id="editId" ref="editForm" />
    </ViewDialog>
  </div>
</template>

<script>
import Pagination from '@neu/biz-core/components/Pagination'
import ViewDialog from '@neu/biz-core/components/ViewDialog'
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import databind from '@neu/biz-core/mixins/databind'
import { page, updateVolume } from '@neu/dcom-ui/api/knowledge'
export default {
  name: 'InspectionTask',
  components: {
    TableFilter,
    ViewDialog,
    EditForm,
    Pagination
    // SelectDialog
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  props: {
    forSelection: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      r: page,
      pageSize: 5,
      knowledgeView: [],
      // d: remove,
      inspectionTypes: [],
      /** 查看的**/
      dialogViewVisible: false,
      dialogFormVisible: false,

      dialogStatus: 'create',
      editId: -1,
      title: '',
      searchKey: ''
    }
  },
  watch: {
    insideTableData: {
      handler(newVal, oldVal) {
        if (newVal) {
          newVal.forEach(t => {
            t.content = this.replaceHtmlTag(t.content)
            if (this.$refs.filterForm.formItem.s_globleSearch) {
              this.searchKey = this.$refs.filterForm.formItem.s_globleSearch
              if (t.content.toUpperCase().indexOf(this.searchKey.toUpperCase()) > 90) {
                t.content = '...' + t.content.substring(t.content.indexOf(this.searchKey) - 90, t.content.length - 1)
              }
              t.content = this.replaceHighlight(t.content, this.searchKey)
              t.title = this.replaceHighlight(t.title, this.searchKey)
            } else {
              this.searchKey = ''
            }
          })
        }
      },
      immediate: true
      // deep: true
    }
  },
  created() {
    this.filter({ s_knowledgeTypeCode: this.type })
  },
  methods: {
    // 替换html标签
    replaceHtmlTag(text) {
      var reg = /<[^<>]+>/g// 1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
      text = text.replace(reg, '')// 替换HTML标签
      text = text.replace(/&nbsp;/ig, '')// 替换HTML空格
      return text
    },
    // 高亮显示
    replaceHighlight(text, searchText) {
      var reg = new RegExp(searchText, 'ig')
      debugger
      text = text.replace(reg, "<span style='color:red'>" + searchText + '</span>')
      return text
    },
    // 表格编辑按钮点击事件处理
    edit(id) {
      // 打开对话框
      this.editId = id
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '保存成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
      this.refresh()
    },
    submit() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.submit().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '提交成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    // view(id) {
    //   this.editId = id
    //   this.dialogViewVisible = true
    // },
    // viewCancel() {
    //   this.editId = -1
    //   // 关闭对话框
    //   this.dialogViewVisible = false
    // },
    click(item) {
      this.editId = item.id
      this.title = this.replaceHtmlTag(item.title)
      this.dialogFormVisible = true
      // 更新浏览数量
      updateVolume(this.editId).then(res => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
/*自定义标题*/
.info-title{
  display: flex;
  align-items: center;
  // padding: 15px 0;
  margin-bottom: 15px;
  font-size: 16px;
  // border-bottom: 1px solid #e6ebf5;
  & > span{font-weight: bold; padding-left: 4px;}
  & > div{flex:1; text-align: right;  font-size: 10px;  color:#66AAF2;}
}
.info_keyword{
  font-size: 10px;
  color:#66AAF2;
}
.info_body{
  display:-webkit-box; //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 1; /*数字是几就显示几行*/
  -webkit-box-orient: vertical;
  //  padding: 10px 0;
  //  height: 100px;
  //  width:100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.high-light{
 color: red;
 font-weight: bold;
}

.info_footer{
  // position: absolute;
  height: 12px;
  padding-top:10px;
  display: flex;
  font-size: 10px;
  color:#66AAF2;
  & > div{flex:1; text-align: right;}
}
.pointer{
  cursor:pointer;
}
</style>
